<!--
 * @Description: nbd developer
 * @Author: wukai
 * @CompanyWebsite: nbd.com.cn
 * @since: 2020-11-19 10:22:48
 * @LastAuthor: wukai
 * @lastTime: 2020-11-19 17:49:51
-->
<template>
    <div class="dialogBox">
        <div class="tipBox">
            <img class="img1" src="../assets/img/motai.png" alt="" />
            <img
                class="img2"
                @click="backs"
                src="../assets/img/close.png"
                alt=""
            />
        </div>
        <div class="contentBox">
            <div class="title">{{ DialogMsg }}</div>
            <div class="contentShowBox">
                <div
                    v-for="(item, index) in DialogList"
                    :key="index"
                    class="contentItem"
                >
                    {{
                        item[0] +
                            '年度' +
                            item[1] +
                            ' 第' +
                            item[2].zh_rank +
                            '名'
                    }}
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import yy from '@/utils/index';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
    @Prop() private DialogMsg!: any;
    @Prop() private DialogList!: any;

    //   showList:any=[]
    //    @Watch('DialogMsg')
    //    getMsg(){
    //       console.log(yy.getListByName(this.DialogMsg))
    //    }

    //取消模态框
    backs() {
        this.$emit('closeMotal');
    }
}
</script>

<style lang="scss" scoped>
.dialogBox {
    width: 646px;
    height: 500px;
    margin: 206px auto;
    position: fixed;
    left: 52px;
    // background: #ccc;
}
.tipBox {
    width: 646px;
    display: flex;
    justify-content: left;
    align-items: center;
}
.img1 {
    width: 600px;
    margin-left: 20px;
}
.img2 {
    width: 46px;
    height: 46px;
    position: relative;
    left: -20px;
    top: 10px;
}
.contentBox {
    width: 646px;
    min-height: 698px;
    box-sizing: border-box;
    border: 4px solid #67c9f2;

    background: #9ed2ef;
    background-image: url('../assets/img/tt1.png');
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat;
    border-radius: 16px;
    padding-bottom: 27px;
}
.title {
    font-size: 32px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #4f4f4f;
    margin: 57px auto;
    text-align: center;
    width: 606px;
}

.contentShowBox {
    width: 606px;
    min-height: 533px;
    max-height: 800px;
    overflow: scroll;
    background: #ffffff;
    border-radius: 16px;
    margin: 50px auto 0;
    padding: 0 40px;
    box-sizing: border-box;
}
.contentItem {
    width: 100%;
    height: 77px;

    font-size: 28px;
    font-family: SourceHanSansCN;
    font-weight: 400;
    color: #4f4f4f;
    display: flex;
    align-items: center;
    border-bottom: 1px dotted #d2d2d2;
}
.contentItem:last-child {
    border-bottom: none;
}
</style>
